<template>
  <!-- <transition 
    enter-active-class="animated fadeInUp"
    leave-active-class="animated fadeOutDown"> -->
  <div class="scroll" v-show="scroll_show">
    <ul>
      <li class='active active_r'>导航</li>
      <li v-for="(item,index) in scrollData" @click="top(item.top[0])" :key='index' :class="{ active:index===scroll_index}">
        <el-badge slot="reference" :value="item.num" :max="99" :hidden="item.num===0">
          <span v-html='item.name'></span>
        </el-badge>
      </li>
      <li @click='top(0)' :class="{ active:10001===scroll_index}">
        <i class='el-icon-caret-top' style="font-size:16px"></i>
      </li>
    </ul>
  </div>
  <!-- </transition> -->

</template>

<script>
export default {
  props: {
    scrollData: {
      type: Array,
      default: []
    }
  },
  watch: {
    scroll_data: {
      handler(o, n) {
        console.log(o)
        console.log(n)
      },
      deep: true
    }

  },
  mounted: {

  },

  data() {
    return {
      scroll_data: [],
      scroll_index: null,
      scroll_show: true
    };
  },
  mounted() {
    //监听页面滚动事件
    window.addEventListener('scroll', this.appScroll)
  },
  created() {
    this.scroll_data = this.scrollData
  },
  methods: {
    appScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let h = document.documentElement.clientHeight || document.body.clientHeight;
      // if (scrollTop >= (h/2)) {
      //   this.scroll_show = true
      // } else {
      //   this.scroll_show = false
      // }
      for (let i = 0; i < this.scrollData.length; i++) {
        if (scrollTop > this.scrollData[i].top[0] && scrollTop < this.scrollData[i].top[1]) {
          this.scroll_index = i
        }
        if (scrollTop < this.scrollData[0].top[0] || scrollTop > this.scrollData[this.scrollData.length - 1].top[1]) {
          this.scroll_index = null
        }
        if (scrollTop > this.scrollData[this.scrollData.length - 1].top[1]) {
          this.scroll_index = 10001
        }
      }
    },
    top(n) {
      if (n === 0) {
        requestAnimationFrame(function () {
          let top = document.documentElement.scrollTop = document.body.scrollTop
          // top =0
          if (top > 0) {
            top -= 5
          }
        });
        // document.documentElement.scrollTop = document.body.scrollTop = 0;
      }
      else {
        document.documentElement.scrollTop = document.body.scrollTop = n + 1;
      }
    }
  }
};
</script>
 <style scoped lang='scss'>
.scroll {
  position: fixed;
  // bottom: 100px;
  top: 50%;
  // background:rgba(7, 128, 237, 0.1);
  background: #fff;
  right: 24px;
  // box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%);
  // border-radius: 5px;
  border: 1px solid #ebeef5;
  //  box-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  ul {
    margin: 0;
    padding: 0;
    li {
      margin: 0;
      margin-bottom: 5px;
      list-style: none;
      font-size: 14px;
      padding: 5px 5px;
      max-width: 84px;
      color: #333;
      text-align: center;
    }
    .active_r {
      border-top-right-radius: 4px;
      border-top-left-radius: 4px;
    }
    .active {
      background: rgba(7, 128, 237, 0.8);
      color: #ffffff;
      span {
        color: #ffffff;
      }
    }
    li:hover {
      background: rgba(7, 128, 237, 0.8);
      color: #ffffff;
      span {
        color: #ffffff;
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

.animated {
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  animation-name: slideInUp;
}

@keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  animation-name: slideOutDown;
}
</style>
